﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Interface/HtmlTable.Zebra</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#HtmlTable:Zebra">Zebra</a></h4>
			<div class="menu-item"><a href="#"></a></div>
			<div class="menu-item"><a href="#HtmlTable:updateZebras">updateZebras</a></div>
			<div class="menu-item"><a href="#HtmlTable:empty">empty</a></div>
			<div class="menu-item"><a href="#HtmlTable:setHeaders">setHeaders</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="HtmlTable:Zebra"><a href="#HtmlTable:Zebra">Class: HtmlTable.Zebra</a></h1>

<p class="description">Adds stripes to an instance of HtmlTable.</p>

<h3>Refactors</h3>

<ul>
<li><a href="HtmlTable.html">HtmlTable</a></li>
</ul>
<h2><a href="#">HtmlTable Method: constructor</a></h2>

<h3 class="description">Syntax</h3>

<pre class="javascript"><span class="kw2">new</span> HtmlTable<span class="br0">(</span><span class="br0">[</span>table, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>table - (<em>mixed</em>; optional) - a Table DOM element or it's id; if you do not specify one, one will be created.</li>
<li>options - (<em>object</em>; optional) a key/value set of options.</li>
</ol>
<h3>Options</h3>

<ul>
<li>all options defined by <a href="HtmlTable.html">HtmlTable</a>, plus:</li>
<li>classZebra - (<em>string</em>) the class added to odd numbered rows; defaults to 'table-tr-odd'</li>
<li>zebra - (<em>boolean</em>) if <em>true</em> adds the <em>classZebra</em> value to odd numbered rows.</li>
</ul>
<h3>Example</h3>

<pre class="javascript"><span class="kw2">var</span> myTable = <span class="kw2">new</span> HtmlTable<span class="br0">(</span><span class="br0">{</span>
    properties: <span class="br0">{</span>
        border: <span class="nu0">1</span>,
        cellspacing: <span class="nu0">3</span>
    <span class="br0">}</span>,
    rows: <span class="br0">[</span>
        <span class="br0">[</span><span class="st0">'apple'</span>, <span class="st0">'red'</span><span class="br0">]</span>,
        <span class="br0">[</span><span class="st0">'lemon'</span>, <span class="st0">'yellow'</span><span class="br0">]</span>
    <span class="br0">]</span>,
    zebra: <span class="kw2">true</span>
<span class="br0">}</span><span class="br0">)</span>;
myTable.<span class="me1">inject</span><span class="br0">(</span>$<span class="br0">(</span><span class="st0">'someContainer'</span><span class="br0">)</span><span class="br0">)</span>;
</pre>

<h2 id="HtmlTable:updateZebras"><a href="#HtmlTable:updateZebras">HtmlTable Method: updateZebras</a></h2>

<p class="description">Updates the rows, reapplying the odd class names.</p>

<h3>Syntax</h3>

<pre class="javascript">myHtmlTable.<span class="me1">updateZebras</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) an object containing the tr and td tags.</li>
</ul>
<h3>Example of Object Returned</h3>

<pre class="javascript"><span class="br0">{</span>tr: theTableRow, tds: <span class="br0">[</span>td, td, td<span class="br0">]</span><span class="br0">}</span>
</pre>

<h2 id="HtmlTable:empty"><a href="#HtmlTable:empty">HtmlTable method: empty</a></h2>

<p class="description">Empties the <em>tbody</em> of the table.</p>

<h3>Syntax</h3>

<pre class="javascript">myTable.<span class="me1">empty</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of HtmlTable.</li>
</ul>
<h2 id="HtmlTable:setHeaders"><a href="#HtmlTable:setHeaders">HtmlTable method: setHeaders</a></h2>

<p class="description">Sets the contents of the <em>thead</em> with <em>th</em> tags.</p>

<h3>Syntax</h3>

<pre class="javascript">myTable.<span class="me1">setHeaders</span><span class="br0">(</span>headers<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>headers - (<em>array</em>) an array of header information; same as the row data sent to <a href="HtmlTable.html#HtmlTable:push">HtmlTable.push</a>
</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of HtmlTable.</li>
</ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
